Bombora

(bämˈbôrə)

Surf Forecasting

Overview

The Purpose

The design and development for the Bombora surf forecasting application sought to address a unique need among a tight-knit, surf community requiring a new type of mobile weather forecasting application that was more than “just another weather app”, but a reliable tool that focused on individual surf styles, skill levels, and personal preferences.

The Goal

The goal was to design a simplified application focusing only on the information necessary to help surfers better understand how closely their individual style, personal preferences, and skill level compared to the weather conditions in ocean environments so they can make more informed decisions to better utilize their time on the ocean and achieve their athletic goals.

surfers_walking

The Project

As part of my curriculum studies, and filling multiple roles along the UX spectrum, I utilized a range of industry tools and core skills, to conduct research, synthesize ideas, conceptualize, and refine designs to produce a complete, working prototype for Bombora in a 6-month time frame.

Scope
  • Mobile-first design + web-app interface
Timeframe
  • 6-Month span from inititation
Role
  • Full-spectrum approach - UX research, ideation, prototyping, and design
Tools
  • Figma, Sketch Balsamiq, and Draw IO
  • InVision, Craft Manager, and Marvel App

Discovery

The Challenge

To better understand the challenge, thoroughly defining the problem was essential. By focusing on these contributing factors and explaining them in the form of a concise problem statement, I was able to gain initial insights into what the needs and goals of my users might be, the origin of these needs, and how I may approach potential solutions and by what criteria I am able to measure their success.

Defined Problem Statement

"Surfers need a way to quickly and accurately forecast weather conditions to determine whether an ocean environment is suitable to their current skill level and is safe to engage in water activities."
Question_mark

Potential Problems

As a starting point to guide the future design, several presumptions were made to identify any potential underlying problems users may experience when attempting to carry out any of the tasks established in the overarching problem statement as well as any possible solutions which could be investigated further to solve these problems. The following context was established:

cross_in_red_circle
Inaccurate
  • Inaccurate, outdated, or unreliable weather and oceanic data
cross_in_red_circle
Limited Functionality
  • Limited functionality in remote costal areas with little to no wi-fi signal
cross_in_red_circle
Complicated
  • Complicated, confusing and/or unintuitive user interface

Potential Solution

Design an app that provides to-the-minute weather forecasting, oceanic, and synoptic data accessible with or without a wifi signal. Design an interface that is easy to use, interpret and understand including an in-depth explanation of all features and functions.
Question_mark

Competitor Analysis

When considering how Bombora may fair among existing applications already established in today’s market,  various social media platforms, discussion forums, and community websites centered around surfing were explored to assist in identifying two of the leading surf forecasting applications claiming to serve a similar purpose to that of the problems I was looking to solve being Magicseaweed and Surfline.To fully vet the two products, a competitor profile was created for each application highlighting numerous app strengths and weaknesses, potential threats, and a variety of competitive advantages (opportunities).

Competitor Profiles

Strengths

  • The app is well known being the first of its kind
  • Is popular and has a large following
  • Its data is used at popular surf events
  • Provides coverage for 3,000 beaches in 180 countries

Weaknesses

  • Forecasting radius is general to an area
  • Nearby spots are general predefined forecasts
  • Local/personalized conditions are largely ignored
  • No real instructional content to "become a better forecaster" as claimed

Opportunities

  • Understanding data is a personal expectation and needs managing
  • Provide instruction on reading synoptic charts
  • Upgrade the help section, define terminology and explain features
  • More accurately display wave height ranges (Refer to the Bureau of Meteorology marine forecasting)

Threats

  • Online reviews claim wave data is too general and other apps’ height estimations are more accurate
  • Reviews state other forecasting apps allow personalized filtering of preferred conditions/li>
  • Live cams on other apps work much better
  • The Spot Advisor app has done away with media content by focusing more on connecting users with each other to report and confirm forecasts

Strengths

  • Has a loyal following and an extensive history in forecasting
  • Impressive UI and intuitive layout
  • Values its user's end experience
  • Largest selection of live surf cams on the market
  • Written reports by forecasters are a plus

Weaknesses

  • App relies heavily on the live cam experience (Subscription for HD cams)
  • Too many ads on the free version
  • Same information as other apps, just presented in a fancier way
  • Some controversy exists around Surfline promoting product features with the sole purpose of drawing customers

Opportunities

  • Include instructions on how to read the animated wind charts
  • Balance between future prediction and real time live cam
  • UI is quite intuitive, could use as a design inspiration for Bombora app

Threats

  • Reports suggest Surfline’s cams have contributed to increased pollution by drawing large crowds to once pristine beaches and locals have been known to destroy Surfline’s cams to protect them
  • Several user reviews suggest using Surfline’s cams in conjunction with other apps for better forecasting accuracy.
  • The Lazy Surfer app is making a splash in the market by personalizing the experience with features tailored toward individual condition reports

Definition

Research

To confirm whether the user goals and usage context remained in alignment with the established problem statement research was conducted leveraging surveys enabling me to reach a large audience via social media, and served as a basis for subsequent user interview scripts. Facilitation of user interviews with individuals qualifying as "a surfer having used a weather forecasting app to determine when to go surfing" enabled me to ask open-ended questions based on real-world experiences to assist in extrapolating participants' reasoning and root causes around specific pain points they'd encountered when using such applications.

Research Goals

For the above mentioned research methods to be effective and yield viable results, four main user research goals were established which set the foundation on which the survey content, user interview script, and questionnaire were based.

Validate Objectives
  • Affirm essential requirements & features
  • Gain insight into product context & community 
Obtain Quantifiable Data
  • Evaluate assumptions to underlying problems
  • Discover new information relevant to the product
Understand Users
  • Thoughts & feelings around users’ experiences
  • Typical workflows & areas of frustration
Engage Conversations
  • Get to the “why” behind users’ needs & goals
  • Substantiate root causes to existing problems 

Research Insights

Both the survey content and user interview script/questions were carefully formulated to address the specific areas of context and workflows for weather forecasting applications used in the surfing community. Qualitative data obtained from both the studies was then broken up into six distinct categories where affinity mapping techniques were applied to arrange the information into respective groups by category.

Affinity Mapping

************** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

Design Personas

To better communicate research the insights obtained from real surfers, design personas were created to tell a more personal story as to why and how surfers interact with and use weather forecasting applications from their perspective. Three personas were developed representing each of the main user types that stood out during analysis focusing around skill level, usage type, and the degree of understanding in surf forecasting. 4 main focal points were established when defining persona content ensuring a user-centered approach throughout the process:

Institute Empathy
View the product through the lens of the persona and make decisions with their goals in mind.
Prioritize Functionality
Rank importance of functions and define those which are best prioritized for implementation.
Understand Objectively
Eliminate bias from the design process to avoid forming differing perspectives on users.
Respect Real Data
Make design decisions based on real users’ needs and goals as the top priority.

Personas

********** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

User Journeys

Using prior research as a base for extracting some of the most important goals, habits and behaviors exhibited by users, journey maps were created to better visualize the thought processes different user types engage in to accomplish their goals. By establishing important sections within the journey maps such as the scenario, goal, task, opportunities, and any surrounding thoughts and feelings, a visual narrative demonstrating a complete and cohesive story made for a deeper means of understanding users.

Journey Maps

********** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

Development

In preparation for the information architecture phase it was necessary to take the variety of user persona perspectives and begin fleshing out the possible in-app paths individual personas may take to achieve their specific goals and ensure no matter what the their need, an action was available to accommodate it.

Ideation

In preparation for the information architecture phase it was necessary to take the variety of user persona perspectives and begin fleshing out the possible in-app paths individual personas may take to achieve their specific goals and ensure no matter what the their need, an action was available to accommodate it.

Task Analysis & User Flows

Using the context from each design persona as a guide, 3 of the most important user goals and steps required to complete the tasks were analyzed then outlined with respective entry points, criteria for success, and simplified into as fewer steps as possible without deviating from the needs of each persona. Subsequently using the information derived from the analysis’, flow diagrams were created to better visualize specific steps required to complete the objective from the users point of view and ensure the personas needs were fulfilled at each point in the user flow.

User Flows

********** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

Information Architecture

To better understand the nature of the application in its entirety a visualization for the overall information architecture and type of content contained within was necessary. With influence from the prior user flows a base structure was laid out in the form of an overall sitemap containing all determined screens demonstrating a first pass on how the various levels of hierarchy within application might be connected and their relationship to one another.

information_architecture_graphics

Initial Sitemap

The initial sitemap was based upon a strict type of hierarchy where user navigation stemmed from the main home screen with each new parent screen initiating a sequence of subsequent screens (children) relating to its content. One exception occurred where a coexisting type of hierarchy was used where switching between the tabbed screens for individual synoptic charts made for an easier transition between the four types available.

Home
Map & info for
current location
Home...
Locations
Locations
Wave
(Display Tile)
Wave...
Wind
(Display Tile)
Wind...
Charts
Charts
Crowds
Crowds
Help
Help
Settings
Settings
Swell
(Display Tile)
Swell...
Local Location
List
Local Location...
Crowd Indicator
Crowd Indicator
FAQ's
FAQ's
Account
Account
App Settings
App Settings
Privacy
Privacy
About
About
Contact Us
Contact Us
Help Categories
Help Categories
Favorite Locations
Favorite Locations
Conditions Preferences 
Conditions Preferences 
Units
Units
Social Media Links
Social Media Links
Time
Time
Date
Date
Personal Information
Personal Information
Safety Alerts
Safety Alerts
Data Logging
Data Logging
Nearby
Locations
Nearby...
Continent List
Continent List
State/Province
List
State/Province...
Favorited
Locations
Favorited...
Recommended
Locations
Recommended...
Ocean List
Ocean List
Wind
Wind
Swell
Height & Direction
Swell...
Pressure
Pressure
Swell
Period
Swell...
Language
Language
Region
Region
Detailed Forecast
Overview
Detailed Forecast...
Daily
Forecast
Daily...
Log
Log
Favorite
Favorite
Update
(Conditions Preferences)
Update...
Conditions Preferences 
Conditions Preferences 
Hourly
Forecast
Hourly...
All Charts
All Charts
Help Topic List
Help Topic List
Text is not SVG - cannot display

Card Sort & Refinement

With a first pass sitemap completed I needed to refine it based on the intuition of real users. To obtain data from a vast audience I conducted for an online card sorting activity using OptimalSort. Confident in a set of predefined categories I opted to proceed with a closed-type card sort where participants were asked to group specific surf and weather related content into said categories. Upon concluding the activity, results/metrics were downloaded, sorted based on their related topics, analyzed for recurring patterns and emerging trends, and a revised sitemap created to suit.

card_sort_activity standardization_grid similarity_matrix

Revised Sitemap

0.0 Home
Map & info for
current location
0.0 Home...
2.0 Locations
2.0 Locations
1.0 Forecasting
1.0 Forecasting
3.0 Crowds
(Scroll)
3.0 Crowds...
4.3 Help
4.3 Help
4.0 Settings
4.0 Settings
2.4.1.1
Local Location List
2.4.1.1...
3.1
Crowd Indicator
3.1...
4.3.2
FAQ's
4.3.2...
4.1 Surfer Profile
4.1 Surfer Profile
4.2 App Settings
4.2 App Settings
4.5 Privacy
4.5 Privacy
4.4 About
4.4 About
4.3.3
Contact Us
4.3.3...
4.3.1
Help Categories
4.3.1...
4.1.2
Favorite Locations
4.1.2...
4.1.3
Conditions Preferences 
4.1.3...
4.2.1
Units
4.2.1...
4.4.1
Social Media Links
4.4.1...
4.2.2
Time
4.2.2...
4.2.3
Date
4.2.3...
4.1.1
Personal Information
4.1.1...
4.1.5
Safety Alerts
4.1.5...
4.1.4
Data Logging
4.1.4...
2.1
Nearby Locations
2.1...
2.4
Continent List
2.4...
2.4.1
State/Province List
2.4.1...
2.2
Favorited Locations
2.2...
2.3
Recommended
Locations
2.3...
1.1.1a
Ocean List
1.1.1a...
1.1.1.1
Wind
1.1.1.1...
1.1.1.2
Height & Direction
1.1.1.2...
1.1.1.4
Pressure
1.1.1.4...
1.1.1.3 Swell
Period
1.1.1.3 Swell...
4.2.4
Language
4.2.4...
4.2.5
Region
4.2.5...
1.2
Detailed Forecast
Overview
1.2...
1.3
Daily Forecast
1.3...
1.3.1
Hourly Forecast
1.3.1...
1.1.1b
All Charts
1.1.1b...
4.3.1.1
Help Topic List
4.3.1.1...
1.1
Synoptic Data
1.1...
Text is not SVG - cannot display

Rapid Prototyping

Using the revised sitemap as a guide to learn what the base functionality for both the application and web version might look like, it's content, and the screens on which content was to be displayed a set of hand-drawn sketches were drafted using transparent wax paper to represent the screens per the sitemap. To avoid wading too deeply into details, color, size, spacing, and imagery were ignored and the completed sketches were cut to size, arranged, and overlaid into different combinations to portray, from a high-level perspective, the design functionality as low-fidelity prototypes showing different user flows and interactions.

********** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

Delivery

Wire-Framing

With high level visuals for the structure and functionality of Bombora completed, translating the low-fidelity sketches into mid-fidelity format using Sketch’s design tools to create the various interface elements helped visualize the overarching concept for how the app might operate and the placement of UI elements without too much detail. The wireframes were then arranged as static visuals using annotations, connector arrows, and interaction highlights to demonstrate the true interactivity and flow for the various core features within the application.

Mid-Fidelity Wire-Frames

************** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

Usability Testing

To evaluate the success rate regarding app learnability and memorability among experienced users and new users alike, a usability test was conducted to assess the efficiency of the app’s main forecasting functions, recognize and record any errors encountered during use, and gauge the overall user satisfaction in areas like navigation, content, use of language layout, and UI. The following test objectives were considered:

Comprehension
Assess how easily users are able to comprehend, absorb, and retain proficiency in navigating the application’s interface.
Utilization
Determine how users prefer to utilize the weather forecasting tools, surf indicators, synoptic information, and location functions.
Personalization
Determine to what degree the PCP and Conditions Logging functions meet the needs of users.
Appeal
Obtain feedback regarding the app’s overall appeal and degree of usability with respect to content, navigation, UI, and use of language.

High-Fidelity Prototyping & Preference Tests

With usability testing complete and a solid set of wireframes to work from, it was time to bring the design to life. Two variations of the  interface were developed for some of the main screens as high-fidelity prototypes, one being an overall theme using color variations, the other using surf-related imagery, experimental weather icons, and alternate fonts. The prototypes were presented to users for preference testing via Helioapp using a set of choice based criteria and instructions for comparing variations of the wireframes and icon options side by side. Initial testing resulted in participants favoring image style icons and subsequent testing resulted in a preference for the overall themed design.

variation_table_tiles variation_table_screens

Design Evolution & Styling

Focusing on the aesthetics required for the themed option, an initial style guide was developed to improve the UI and create a visually appealing brand to complete the user experience containing color, typography, and the overall styles to be used throughout the application. The main design principles applied comprised of:

Proximity & Similarity
By combining common themed items within their own respective boundaries users naturally associate them as a unit and their relation to one another.​
Balance & Proportion
Informal balance distributed the visual weight of the elements demonstrating equal importance and the shape combinations serving a cohesive purpose.​
Common Fate & Hierarchy
Expandable content segments indicate they are grouped and order of importance is demonstrated in a top-down fashion depending on the category selected.
Hierarchy & Emphasis
The visual contrast created by tint and blur techniques is highly effective in drawing the users attention to the specific elements called-out via the corresponding coach marks.

Design Evolution

************** SPACE RESERVED FOR SLIDESHOW - VERIFY MY APPROACH WITH PETER **********

Design Language System

Using the style guide and brand theme as a foundation, a comprehensive design language was ultimately developed for the entire Bombora product as a means of governance containing all design standards and rules for their application within the user interface across multiple platforms.​

Accessibility Considerations

Over the course of the design several important accessibility items were addressed by evaluating the design against the Web Content Accessibility Guidelines (WCAG) accessibility guidelines and ranking them according to their level of compliance (A, AA, or AAA). Bombora's goal was to comply, at a minimum with either the A and/or AA level requirements, and the AAA level requirement in areas when possible. To obtain compliance the following revisions were implemented:

Putting It All Together

With the majority of the main design deliverables an design language completed, an updated interactive prototype and set of 3D mock-up’s were created using Figma to present Bombora to various audiences offering a realistic sense into how the application will function and feel, and for use in future testing and planning for further iteration drawing the product closer toward completion.

Next Steps

In the coming months upon graduating from my CareerFoundry studies, I intend to bring the Bombora Surf Forecasting application to completion focusing on several areas requiring specific improvements or additional research and ideation to evolve including:

Final Reflection

Pursing design for the Bombora Surf Forecasting app for my student project not only allowed me to graduate with my UX Design Immersive Certification, but granted fulfillment of my personal journey into the world of technology and user experience. The overall experience has led to significant professional growth and learning opportunities such as:

  • Learning industry tools, and technical competencies, while honing my interpersonal skills for use across the UX design-thinking spectrum
  • The talk of the trade. Industry jargon and technical terms commonly referred to throughout the technology sector and product design world
  • How evidently UX design-thinking and associated skills are translatable from those used in other industries
  • Feedback and insights are still two of the greatest means toward professional growth
  • My interpersonal skills will offer great value in building relationships and driving momentum in my career choice
  • The beauty of technology and the endless possibilities it offers us to improve our world
  • A new appreciation for the human experience, its value, and why it matters in the lives of all of us